<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <a-form :model="queryData" size="small" layout="inline">
                        <a-form-item label="编制日期" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.orgDate"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="配方单号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.formulaCode"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="性质" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.nature"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="流转卡号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.circulatCard"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="布号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.clothCode"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="品名" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.brandName"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="客户名称" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.customName"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="色号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.colorCode"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="色称" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.colorName"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="设备编码" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.equipmentNo"
                                @press-enter="huiche" />
                        </a-form-item>
                    </a-form>
                </div>

            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar">
                <Toolbar :style="{ width: '200px' }" :items="['查询', '导出']" @select="cx" @dyBoufei="printTz" @export="exportExcel">
                </Toolbar>
            </div>
        </template>
        <template #pageTabel>

              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady" style="height:100%"
                :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc">
            </AgGridVuesCopys>

        </template>
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
            style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page" />
        <a-drawer cancel-text='关闭' :style="{ zIndex: 999 }" height="95%" :mask-closable="false" title="明细"
            popup-container=".arco-tabs-content" placement="bottom" :visible="pageData.showAdd" unmountOnClose
            @cancel="pageData.showAdd = false">
            <a-table size="mini" :scrollbar="true" sticky-header :style="{ height: '100%' }" stripe
                :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                v-model:selected-keys="selectedRowKeys1" row-key="id" :bordered="{ cell: true }" :pagination="false"
                :columns="tableColumns1" :data="queryData.FormulaMarkDetail">
            </a-table>
        </a-drawer>

    </pageTabelLayout>
</template>
<script lang='ts' setup>
import { number } from 'echarts/core';
import { reactive, toRefs, ref } from 'vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import { post } from '@/api/http'
import { url } from 'inspector';

import { Message, Modal } from '@arco-design/web-vue';
import { IconDoubleUp, IconDoubleDown } from '@arco-design/web-vue/es/icon';
import { localeText } from '@/api/aggridZw'
import printJS from 'print-js'
import { InputInstance } from "@arco-design/web-vue/es/input";
import { Key } from '@element-plus/icons-vue';
//引入导出方法
import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'
const localeText1: any = ref(localeText)

const queryData: any = reactive({

    FormulaMarkDetail: [],


});
const pageData: any = reactive({
    showAdd: false,
    sideTitle: '新增',
    tableList1: [],
    tableList2: [],
    tableList3: [],
    tableList4: [],
    circulatCard: "",
    orgDate: "",
    clothCode: "",
    customName: "",
    planCode: "",
    brandName: "",
    nature: "",
    colorCode: "",
    colorName: "",
    equipmentNo: "",
    dataList:[]
})
const getFocus1 = ref<InputInstance | null>(null);
onMounted(() => {
    getFocus1.value?.focus();
});

const headerShow = ref<boolean>(true)
function doRefresh() {
    post({
        url: '/dwWorkShop/SpecialManage/getPage',
        data: {
            page: pagination.page,
            size: pagination.pageSize,
            circulatCard: "",
            orgDate: "",
            clothCode: "",
            customName: "",
            planCode: "",
            brandName: "",
            nature: "",
            colorCode: "",
            colorName: "",
            equipmentNo: ""
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            table.handleSuccess(data.list);
            // pagination.setTotalSize(data.total);
            gridOption.value.setRowData(data.list);
            total.value = data.total;
            pageData.dataList = data.list
        }
    })
        .catch(console.log);
}
const total = ref(0);
const page = ref(1);
const size = ref(0);
function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}
function change1(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const cx = () => {
    pagination.page = 1
    doRefresh()
}


const table = useTable()

const pagination = usePagination(doRefresh)
let selectedRowKeys1 = ref()


const tableColumns = useTableColumn([
    {
        title: "配方单号",
        key: "formulaCode",
        dataIndex: "formulaCode",
        width: 150,
    },

    {
        title: "编制日期",
        key: "orgDate",
        dataIndex: "orgDate",
        width: 150
    },
    {
        title: "性质",
        key: "nature",
        dataIndex: "nature",
        width: 150
    },
    {
        title: "设备编号",
        key: "equipmentNo",
        dataIndex: "equipmentNo",
        width: 150
    },
    {
        title: "流转卡号",
        key: "circulatCard",
        dataIndex: "circulatCard",
        width: 150
    },
    {
        title: "品名",
        key: "brandName",
        dataIndex: "brandName",
        width: 150
    },
    {
        title: "匹数",
        key: "pieceNum",
        dataIndex: "pieceNum",
        width: 150
    },
    {
        title: "重量",
        key: "weight",
        dataIndex: "weight",
        width: 150
    },
    {
        title: "客户名称",
        key: "customName",
        dataIndex: "customName",
        width: 150
    },
    {
        title: "计划单号",
        key: "planCode",
        dataIndex: "planCode",
        width: 150
    },
    {
        title: "色号",
        key: "colorCode",
        dataIndex: "colorCode",
        width: 150
    },
    {
        title: "色称",
        key: "colorName",
        dataIndex: "colorName",
        width: 150
    },
    {
        title: "是否出库",
        key: "circulatCard",
        dataIndex: "circulatCard",
        width: 150
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150
    },
    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150
    },
    {
        title: '操作',
        key: "act",
        slotName: 'act',
        width: 150, fixed: 'right'
    }
])

let tc: any = tableColumns.map((o) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed']
    }
    if (o.slotName === 'act') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = '80px'
        obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link  @click="a">明细</el-button>`,
            setup(props: any) {
                const a = () => {
                    editHandler(props.params.data)
                }
                return {
                    a
                }
            }

        }
    }
    return obj
})
const editHandler = (record: any) => {
    //查明细
    post({
        url: "dwWorkShop/FormulaMarkDetail/getList",
        data: { "formulaMarkId": record.id, }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            queryData.FormulaMarkDetail = data
            pageData.showAdd = true
        } else {
            Message.error({
                content: "查询失败！",
                duration: 5000,
            });
        }
    });

}
let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    //lockPosition: "left",
}]

const dataList = ref('1')
// 表格准备事件
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}


const huiche = () => {
    doRefresh();
}

let tableColumns1: any = [
    {
        title: '工序名称',
        key: 'processName',
        dataIndex: 'processName',
        width: 150,
    },
    {
        title: '程序号',
        key: 'programNo',
        dataIndex: 'programNo',
        width: 150,
    },
    {
        title: '程序名称',
        key: 'programName',
        dataIndex: 'programName',
        width: 150,
    },
    {
        title: '助剂编号',
        key: 'adjuvantCode',
        dataIndex: 'adjuvantCode',
        width: 150,
    },
    {
        title: '助剂名称',
        key: 'adjuvantName',
        dataIndex: 'adjuvantName',
        width: 150,
    },
    {
        title: '原料类型',
        key: 'rawmaterialType',
        dataIndex: 'rawmaterialType',
        width: 150,
    },
    {
        title: '浓度',
        key: 'concentration',
        dataIndex: 'concentration',
        width: 150,
    },
    {
        title: '浓度单位',
        key: 'concentrationUnit',
        dataIndex: 'concentrationUnit',
        width: 150,
    },
    {
        title: '用料(次)',
        key: 'materialAmount',
        dataIndex: 'materialAmount',
        width: 150,
    },
    {
        title: '单位',
        key: 'unit',
        dataIndex: 'unit',
        width: 150,
    },
    {
        title: '批号',
        key: 'batchNo',
        dataIndex: 'batchNo',
        width: 150,
    },
    {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
    },
    {
        title: '称料接手',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
    {
        title: '称料开始',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
    {
        title: '称料完成',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
    {
        title: '原料出库',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
    {
        title: '出库重量',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
    {
        title: '出库单号',
        key: 'upDownPressure',
        dataIndex: 'upDownPressure',
        width: 150,
    },
]

tc = a.concat(tc)


//打开打印弹窗
function printTz() {
    //判断是否勾选了数据
    // if (gridOption.value.getSelectedRows().length === 0) {
    //     Message.error('请勾选一条数据');
    //     return
    // }
    // if (gridOption.value.getSelectedRows().length > 1) {
    //     Message.error('请勾选一条数据');
    //     return
    // }
    // pageData.id = gridOption.value.getSelectedRows()[0]['id']
    // pageData.fabricId = gridOption.value.getSelectedRows()[0]['fabricId']

    visible.value = true;
}
// 导出
let exportExcel = () => {
    EXELTABLE(tableColumns, pageData.dataList, '整理配方制单查询')
}
const visible = ref(false);

const handleOk = () => {
    printJS({
        printable: 'tzscbb',
        type: 'html',
        targetStyles: ['*'],
    })
    visible.value = false;
};
const handleCancel = () => {
    visible.value = false;
}

</script>
<style lang='less' scoped>
.search-form {
    margin-top: 10px;
}

.fromTitle {
    width: 100%;
    background-color: white;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    form {
        width: 50% !important;
        margin-top: 10px !important;
    }

    &>.my-header {
        width: 100%;
        padding: 10px;
        padding-top: 0;
        background-color: white;


        min-height: 10%;

        &>.my-tool-bar {
            width: 100%;
            text-align: right;
            margin-top: 50px;
        }
    }
}

.fromTitle1 {
    margin-left: 50px;
    margin-top: 60px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}


.table tr,
.table td {
    border: 1px solid #3e3e3e;
    text-align: center;
}
</style>